.pm_labels {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 88%;
    background: inherit;

    [class*="-label"] {
        display: flex;
        background: inherit;
        align-items: center;
        margin-left: .25em;
        border-radius: 3px;
        max-width: 8rem;
        border: 2px solid currentColor;
        transition: max-width .25s ease;
        line-height: 1;
        max-height: 100% /* Prevent wrong height on Edge ~ row mode */
    }
    [class*="-label"]:last-of-type {margin-right: 0}

    [class*="-hidden"] { display: none }

    [class*="-name"] {
        padding: 0 .4rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    [class*="-more"] {
        pointer-events: none;
        overflow: hidden;
        border-left-width: 0 !important;
        border-radius: 0 3px 3px 0;
        line-height: 14px;
        color: rgba(0,0,0,.35);
        max-width: 1.5rem;
        width: 1.5rem;
        text-align: center;
        background: rgba(0,0,0,.1);
        padding: 0;
        margin: 0;
    }

    [class*="-btn-"] {
        pointer-events: all;
        background: transparent;
        color: currentColor;
        border: 0;
    }
    [class*="-btn-"]:active { color: $primary }
    [class*="-btn-"]:focus { outline: 1px solid grey }
}

.pm_labels[data-format="stack"] {
    [class*="-label"]:not(:first-of-type) {
        max-width: .5rem;
        padding-right: 0;
        overflow: hidden;
        border-left-width: 0 !important;
        border-radius: 0 3px 3px 0;
    }

    [class*="-label"]:not(:first-of-type):hover {
        border-left-width: 2px !important;
        border-radius: 3px;
        max-width: 8rem;
        line-height: 14px;
        padding: 0 .4rem;
    }

}

.pm_labels:not([data-button="remove"]) {
    [class*="btn-remove"] { display: none }
}
